<template>
	<van-nav-bar title="个人中心" />
	<div class="g-wrapper">
		<div class="g-user-info" v-if="account">
			<van-image round width="60px" height="60px" :src="account.url" />
			<p>昵称:{{ account.username }}</p>
		</div>
		<div v-else style="color: white; text-align: center; line-height: 150px">用户未登录</div>
		<van-button
			v-if="!account"
			round
			color="#f9826a"
			style="position: absolute; bottom: 5px; right: 5px"
			@click="bindLogin"
			>用户登录</van-button
		>
		<van-button v-else round color="#f9826a" style="position: absolute; bottom: 5px; right: 5px" @click="bindLogout"
			>退出登录</van-button
		>
	</div>
	<van-cell-group >
		<van-cell title="服务" value=">" />
		<van-cell title="收藏" value=">" />
	</van-cell-group>

    <van-cell-group >
		<van-cell title="设置" value=">" />
		<van-cell title="反馈" value=">" label="填写你的反馈意见"  />
	</van-cell-group>
    <van-cell-group >
		<van-cell title="卡包" value=">" />
		<van-cell title="表情" value=">"  />
	</van-cell-group>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const account = ref(null)

/**
 * 登录
 */
const bindLogin = () => {
	router.push({ path: '/login' })
}
/**
 * 退出
 */
const bindLogout = () => {
	localStorage.removeItem('userinfo') // 移除名为userinfo的数据
	account.value = null // 刷新界面
}

onMounted(() => {
	const userinfo = localStorage.getItem('userinfo') // 获取数据
	account.value = JSON.parse(userinfo)
})
</script>

<style lang="css" scoped>
.g-wrapper {
	width: 100%;
	height: 150px;
	background-color: #a52a2a;
	position: relative;
}
.g-user-info {
	padding: 10px;
	display: flex;
	width: 200px;
	align-items: center;
}
.g-user-info p {
	color: white;
	margin-left: 5px;
}
</style>
